<script lang="ts" setup>
import { computed } from 'vue';

import { Button, Tooltip } from 'ant-design-vue';

import { Icon } from '#/components/icon';

import { useTheme } from '../../composables/useTheme';

/* 使用主题组合式函数 */
const { isDark, toggleTheme } = useTheme();

/* 计算主题图标 */
const themeIcon = computed(() =>
  isDark.value ? 'ant-design:sun-outlined' : 'ant-design:moon-outlined',
);

/* 计算主题提示文本 */
const tooltipText = computed(() =>
  isDark.value ? '切换到亮色模式' : '切换到暗色模式',
);
</script>

<template>
  <Tooltip :title="tooltipText">
    <Button type="text" class="theme-switch-btn" @click="toggleTheme">
      <Icon :icon="themeIcon" />
    </Button>
  </Tooltip>
</template>

<style lang="less" scoped>
@import '../../styles/common.less';

.theme-switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 20px;
  color: @light-text-color;
  background: @light-bg-color;
  border: 1px solid @light-border-color;
  border-radius: 50%;
  transition: all 0.3s;

  &:hover {
    background: @light-hover-bg;
    transform: scale(1.05);
  }

  .dark & {
    color: @dark-text-color;
    background: @dark-secondary-bg;
    border: 1px solid @dark-border-color;

    &:hover {
      background: @dark-hover-bg;
    }
  }
}
</style>
